<template>
  <div class="myActivity">
    <Vheader :header="header"></Vheader>
    <ul class="templateUl">
      <li class="templateTitle">
        <span>我的活动模板</span>
      </li>
      <template v-for="item in list">
        <li class="activity" :key="item.id">
          <div class="templateImg"><img :src="item.templatebackgroundImgPath" /></div>
          <div class="tempContent">
            <div class="firstLine">
              <span class="restTime">{{item.restTime}}天</span>
              <span><button class="payMore" @click="payMore()">续费</button></span>
            </div>
            <div class="lastLine">
              <button class="btnCss1" v-show="item.activityWrapper.state !== 1" @click="setTemplate(item.id, item.title, item.activityName, item.playCount,item.description, item.description2, item.weixinQrCodePath)">设置模板</button>
              <!--<div class="rightBtn">-->
              <button v-show="item.activityWrapper.state === 1" class="pause" @click="preEnd(item.activityWrapper.activity.id)">||</button>
                <!--<button v-show="item.activityWrapper.state === 1" class="btnCss2" @click="gameStart(item.activityWrapper.activity.id)">游戏入口</button>-->
                <!--<button v-show="item.activityWrapper.state === 1" class="btnCss2" @click="rankTable(item.activityWrapper.activity.id)">排行榜入口</button>-->
              <span class="dateStyle">{{item.startTime}}</span>
              <span class="dateStyle">{{item.endTime}}</span>
              <button v-show="item.activityWrapper.state === 1" class="btnCss2" @click="activityInfo(item.activityWrapper.activity.id,item.template.name)">活动详情</button>
              <button v-if="item.weixinQrCodePath" v-show="item.activityWrapper.state !== 1" class="btnCss2" @click="startActivity(item.id,item.startTime,item.endTime)">启动活动</button>
                <!-- <button  class="btnCss2" @click="playersInfo()">玩家信息</button> -->
              <!--</div>-->
            </div>
          </div>
        </li>
      </template>
      <button class="getMoreTemp" @click="getMoreTemp()">获取更多模板</button>
    </ul>
    <Vfooter></Vfooter>
    <!--设置时间，启动活动dialog-->
    <Vdialog
      :visible="dialogVisible"
      :closeDialog="handleClose"
      :classes="dialogSmallContent">
      <!--设置时间-->
      <div slot="modal-body" class="dialogBody" v-show="startActivityVisible">
        <div class="setTime">
          <label class="setTimeTitle">设置时间</label>
            <el-form :model="timeForm" :rules="rule" ref="timeForm" label-width="150px" class="demo-ruleForm">
              <el-form-item class="startTime" label="开始日期" prop="startTime">
                <el-date-picker v-model="timeForm.startTime" type="date" placeholder="请选择开始日期"></el-date-picker>
              </el-form-item>
              <el-form-item class="endTime" label="结束日期" prop="endTime">
                <el-date-picker v-model="timeForm.endTime" type="date" placeholder="请选择结束日期"></el-date-picker>
              </el-form-item>
            </el-form>
          <label class="tip">启动活动之前请先对游戏模板进行设置</label>
          <div class="btn">
            <button class="start" @click="startSuccess()">启动</button>
            <button class="cancel" @click="handleClose">取消</button>
          </div>
        </div>
      </div>
      <!-- 创建活动 -->
      <div slot="modal-body" class="dialogBody" v-show="createActivityVisible" >
        <div class="payDialog">
          <div class="payTitle"><span>请选择支付方式</span></div>
          <div class="payImg">
            <div class="payTreasure">
              <img class="payTreasureImg" src="/static/imgs/myActivityImg/details_PayTreasure.png">
              <input class="radioCss" type="radio" name="way" value="0" v-model="payTreasure.picked">
            </div>
            <div class="weChat">
              <img class="weChatImg" src="/static/imgs/myActivityImg/details_wechat.png">
              <input class="radioCss" type="radio" name="way" value="1" v-model="payTreasure.picked">
            </div>
          </div>
          <div class="sumCss">
            <label class="sum">金额：</label>
            <input class="getNumber" type="number" name="money" v-model="payTreasure.sum">
            <label class="sum">元</label>
          </div>
          <div class="radio">
            <div class="radio1">
              <label for="3">3天</label>
              <div class="inputCss">
                <input class="radioCss" type="radio" name="days" value="3" v-model="payTreasure.checked">
              </div>
            </div>
            <div class="radio2">
              <label for="7">7天</label>
              <div class="inputCss">
                <input class="radioCss" type="radio" name="days" value="7" v-model="payTreasure.checked">
              </div>
            </div>
            <div class="radio3">
              <label for="30">30天</label>
              <div class="inputCss">
                <input class="radioCss" type="radio" name="days" value="30" v-model="payTreasure.checked">
              </div>
            </div>
          </div>
          <div class="btnDialogCss">
            <button class="btn1" @click="OneDay()">免费试用一天</button>
            <button class="btn2" @click="buy()">购买</button>
            <button class="btn3" @click="handleClose">取消</button>
          </div>
        </div>
      </div>
      <!-- 启动活动成功 -->
      <div slot="modal-body" class="dialogBody" v-show="startSuccessVisible">
        <div class="startSuccessContent">
          <span class="startSuccessTitle">启动成功</span>
          <span class="tip1">请下载对应的二维码，将它放在公众号的文案里吧</span>
          <span class="tip2">详细说明及规范展示</span>
          <div class="TwoDbarcode">
            <div class="left2D">
              <img class="TwoDbarcodeImg" :src="imgQRCode0">
              <span>游戏入口</span>
              <button class="downBtn" @click = "downLoad0()">下载</button>
            </div>
            <div class="right2D">
              <img class="TwoDbarcodeImg" :src="imgQRCode1">
              <span>玩家信息入口</span>
              <button class="downBtn" @click = "downLoad1()">下载</button>
            </div>
          </div>
          <button class="startSure" @click="startSuccessSure()">确定</button>
        </div>
      </div>
    </Vdialog>
  </div>
</template>

<script>
/*eslint-disable*/
import Vheader from './common/Vheader'
import Vfooter from './common/Vfooter'
import Vdialog from './common/Vdialog'
import { loginAction, registerAction, forgetPasswordAction } from '../axios/api/homePage_api'
import { startSuccessAction, getQRCode0Action, getQRCode1Action, getTemplateListAction, getActivityListAction, stopActivityAction, downloadQRCode0Action, downloadQRCode1Action } from '../axios/api/myActivity_api'

export default {
  name: 'myActivity',
  data () {
    var validatePhone = ''
    this.activities = ''
    var stimeRule = (rule, value, callback) => {
        let curDate = new Date()
        if (value === '') {
          callback(new Error('请输入开始时间！'))
        } else if (value < curDate){
          callback (new Error('请选择大于今天时间！'))
        } else {
          callback()
        }
      }
    var etimeRule = (rule, value, callback) => {
      var s = new Date(this.timeForm.startTime)
      if (value === '') {
        callback(new Error('请输入结束时间！'))
      } else if (value <= s){
        callback (new Error('请选择大于开始时间！'))
      } else {
        callback()
      }
    }
    return {
      header: {
        userName: '',
        logout: this.logout,
        login: '',
        templateAction: this.templateAction,
        template: '返回首页'
      },
      list: [
        {
          activityWrapper:{
            state:'',
            activity:{
              id:'',
              startTime:'',
              endTime:'',
              state:'',
              userTemplateId:''
            }
          },
          restTime:'',
          backgroundImgPath:'',
          description:'',
          description2:'',
          endTime:'',
          id:'',
          playCount:'',
          startTime:'',
          state:'',
          username:'',
          weixinQrCodePath:'',
          title:'',
          template:{
            backgroundImgPath: '',
            description: '',
            id: '',
            name: '',
            serveUrl: '',
            state: '',
            title: '',
            type: '',
            username: ''
          }
        }
      ],
      // 控制dialog是否显示，以及显示那个模块的变量
      dialogSmallContent: 'dialogSmallContent',
      dialogVisible:false,
      startActivityVisible:false,
      startSuccessVisible:false,
      createActivityVisible:false,
      restTime:'1天10小时',
      timeForm:{
        startTime:'',
        endTime:''
      },
      imgQRCode0:'',
      imgQRCode1:'',
      payTreasure: {
        picked:'',
        sum:'',
        checked:''
      },
      userTemplateId:'',
      activityId:'',
      state:'',
      type:'',
      reFlash:false,
      rule: {
        startTime: [
          { required: true, validator: stimeRule, trigger: 'blur' }
        ],
        endTime: [
          { required: true, validator: etimeRule, trigger: 'blur'  }
        ]
      },
    };
  },
  components: {
    Vheader,
    Vfooter,
    Vdialog
  },
  created () {
    this.getTemplateList()
  },
  updated () {
    window.scroll(0, 0)
  },
  methods: {
    // 点击启动活动
    startActivity(id,startTime,endTime){
      this.dialogVisible = true;
      this.startActivityVisible = true;
      this.startSuccessVisible = false;
      this.createActivityVisible = false;
      this.userTemplateId = id;
      this.reFlash = true
    },
    // 关闭dialog
    handleClose () {
      this.dialogVisible = false;
    },
    //获取用户创建的活动
    async getActivityList () {
      let { data } = await getActivityListAction();
    },
    //获取用户购买的活动模板
    async getTemplateList(){
      let {data} = await getTemplateListAction()
      if (data.code !== 1 ) {
        this.$message({
          message: "获取活动模板失败！",
          type: "warning"
        })
      } else {
          this.list = data.data
          console.log(this.list)
          for (let i = 0; i < this.list.length; i++) {
              this.list[i].templatebackgroundImgPath = '/littlefinger/storage/images/' + this.list[i].template.backgroundImgPath
              this.list[i].templateId = this.list[i].template.id
              this.list[i].templateName = this.list[i].template.name
              if (this.list[i].activityWrapper.activity !== null){
                this.activityId = this.list[i].activityWrapper.activity.id
                this.timeForm.startTime = this.list[i].activityWrapper.activity.startTime
                this.timeForm.endTime = this.list[i].activityWrapper.activity.endTime
                this.list[i].restTime = this.daysBetween(this.timeForm.startTime, this.timeForm.endTime)
              } else {
                this.list[i].restTime = 0
              }
          }
        }
    },
    //设置时间成功，启动活动--------------成功
    async startSuccess(){
      this.startActivityVisible = false
      this.createActivityVisible = false
      this.startSuccessVisible = true
      this.dialogVisible = false
      var s = new Date(this.timeForm.startTime)
      var e = new Date(this.timeForm.endTime) //yyyy-MM-dd
      this.timeForm.startTime = s.toISOString().slice(0,10)
      this.timeForm.endTime = e.toISOString().slice(0,10)
      //console.log(this.timeForm.startTime)
      this.$refs['timeForm'].validate(async valid => {
        if (valid) {
          console.log(this.userTemplateId,this.timeForm.startTime,this.timeForm.endTime)
          let {data} = await startSuccessAction({userTemplateId:this.userTemplateId,startTime:this.timeForm.startTime,endTime:this.timeForm.endTime})
          if (data.code !== 1){
            this.$message({
              message: "启动活动失败！",
              type: "warning"
            })
          } else {
            this.getQRCode0()
            this.getQRCode1()
            this.dialogVisible = true
            this.startSuccessVisible = true
          }
        } else {
          return false
        }
      })
    },
    daysBetween(startTime, endTime) {
      console.log(startTime, endTime)
      var s = new Date(startTime)
      var e = new Date(endTime)
      let DateOne = s.toISOString().slice(0,10)
      let DateTwo = e.toISOString().slice(0,10)
      console.log(DateOne, DateTwo)
      var OneMonth = DateOne.substring(5,DateOne.lastIndexOf ('-'));
      var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf ('-')+1);
      var OneYear = DateOne.substring(0,DateOne.indexOf ('-'));

      var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf ('-'));
      var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf ('-')+1);
      var TwoYear = DateTwo.substring(0,DateTwo.indexOf ('-'));

      this.restTime=((Date.parse(TwoMonth+'/'+TwoDay+'/'+TwoYear)-Date.parse(OneMonth+'/'+OneDay+'/'+OneYear))/86400000);
      console.log(Math.abs(this.restTime))
      return Math.abs(this.restTime);
    },
    //启动活动成功确定
    startSuccessSure () {
      this.dialogVisible = false
      if (this.reFlash == true){
        location.reload()
      }
      // console.log(this.state)
      // if (this.state === 0){
      //   this.$message({
      //     message: "不存在此活动！",
      //     type: "warning"
      //   })
      // } else if (this.state === 1){
      //   this.$message({
      //     message: "活动正在进行中！",
      //     type: "success"
      //   })
      //     this.willShow = true;
      // } else if (this.state === 2||3){
      //   this.willShow = false;
      //   this.$message({
      //     message: "活动还没开始或已结束！",
      //     type: "warning"
      //   })
      // } else {
      //   this.willShow = false;
      //   this.$message({
      //     message: "活动无效！",
      //     type: "warning"
      //   })
      // }
    },
    //提前终止
    async preEnd(activityId){
      this.activityId = activityId
      let {data} = await stopActivityAction({activityId:this.activityId})
      location.reload()
    },
    //游戏入口
    gameStart(activityId){
      this.dialogVisible = true
      this.startActivityVisible = false
      this.createActivityVisible = false
      this.startSuccessVisible = true
      this.activityId = activityId
      this.getQRCode0()
      this.getQRCode1()
    },
    //获取更多模板
    getMoreTemp(){
      this.$router.push({name: 'homePage'})
    },
    //设置活动模板
    async setTemplate ( userTemplateId, title, activityName, playCount, description, description2, qrCode ) {
      this.$router.push({name: 'setActivityTemplate' , query:
        {activityList:
          {
            userTemplateId: userTemplateId,
            title: title,
            activityName: activityName,
            playCount: playCount,
            description: description,
            description2: description2,
            qrCode: qrCode
          }
        }
      });
    },
    //玩家信息
    rankTable(activityId) {
      this.$router.push({name: 'playersInfo', query:{activityId: this.activityId}})
    },
    //活动详情
    async activityInfo (activityId,templateName) {
      this.$router.push({name: 'activityInfo' , query:
              {
                activityId: activityId,
                templateName: templateName

              }
      });
    },
    //获取游戏入口二维码
    async getQRCode0 () {
      this.type = 0
      let data = await getQRCode0Action({activityId:this.activityId, type:this.type})
      this.imgQRCode0 = data.request.responseURL
    },
    //获取玩家信息二维码
    async getQRCode1 () {
      this.type = 1
      let data = await getQRCode1Action({activityId:this.activityId, type:this.type})
      this.imgQRCode1 = data.request.responseURL
    },
    async downLoad0 () {
      this.type = 0
      let url = 'http://118.31.239.135:8125/littlefinger/activity/downloadQRCode?type=0&activityId=' + this.activityId
      window.location.href = url
    },
    async downLoad1 () {
      this.type = 1
      let url = 'http://118.31.239.135:8125/littlefinger/activity/downloadQRCode?type=1&activityId=' + this.activityId
      window.location.href = url
    },
    //续费
    payMore(){
      this.dialogVisible = true;
      this.createActivityVisible = true;
      this.startActivityVisible = false;
      this.startSuccessVisible = false;
    },
    //返回首页
    templateAction(){
      this.$router.push({name: 'homePage'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.myActivity{
  min-width: 1000px;
  overflow: hidden;
  background-color: #e9e9e7;
  font-family: 'SimSun';
}
  .myActivity .templateUl{
    margin: 0 78px;
    justify-content: center;
  }
  .templateTitle{
    display: flex;
    justify-content: flex-start;
    margin-top: 27px;
    font-family: 'SimSun';
    font-size: 36px;
    color: #818181;
    padding-left: 6px;
  }
  .activity{
    width: 100%;
    flex-direction: row;
    flex-wrap:nowrap;
    box-shadow: 4px 4px 13px #666;
    margin-top: 27px;
    display: flex;
    justify-content: flex-start;
    height: 380px;
    background-color: #fff;
  }
  .templateImg{
    width: 100%;
    height: 380px;
    padding: 10px;
  }
  .templateImg img{
    width: 100%;
    height: 360px;
    z-index: -1;
  }
  .tempContent{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: 380px;
    width: 100%;
    min-width: 1000px;
    flex-wrap:wrap;
  }
/*活动模板剩余时间样式*/
.restTime{
  position:relative;
  display:inline-block;
  width: 152px;
  height: 45px;
  color: #ff7575;//

  font-family: 'SimSun';
  font-size: 18px;
  background-color: #8ab5ea;
  /*margin-top: 10px;*/
  padding-left: 0;
  /*margin-right: 240px;*/
  border-radius: 3px;
  line-height: 50px;
}
.lastLine{
  position: relative;
  /* justify-content: space-between; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
  /* margin-top: 330px; */
  margin-bottom: 11px;
  margin-left: 10px;
  /* margin-right: 174px; */
}
.pause{
  position: relative;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  display: inline-block;
  background-color: #ee503f;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border-radius: 0px;
  width: 3%;
  height: 45px;
  border: 1px solid #ee503f;
  font-size: 18px;
  color: #f9f6f6;
  font-family: 'SimSun';
  /*margin-right: 4%;*/
  line-height: 45px;
  margin-left: 10px;
}
.pause:hover{
  background-color: #ff7575;
 }
.firstLine{
  position: relative;
  /*justify-content: space-between;*/
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-flow: nowrap;
  /*width: 100%;*/
  margin-top: 10px ;
  margin-bottom: 11px;
  /*margin-right: 174px;*/
}
/*设置模板样式*/
.btnCss1{
  position: relative;
  display: inline-block;
  background-color: transparent;
  border-radius: 0px;
  width: 10%;
  height: 45px;
  border: 1px solid #47cb69;
  font-size: 18px;  /*字体自适应？？？*/
  color: #fff;
  font-family: 'SimSun';
  margin-left: 185px;
  line-height: 45px;
  /*margin-right: 100px;*/
}
.btnCss1:hover{
  background-color: #47cb69;
}
.rightBtn{
  position: relative;
  width: 10%;
  height: 45px;
  margin-right: 20px;
}
/*启动活动与玩家信息样式*/
.btnCss2{
  position: relative;
  align-items: flex-end;
  display: inline-block;
  background-color: #4cee76;
  flex-wrap: wrap;
  border-radius: 0px;
  width: 8%;
  height: 45px;
  border: 1px solid #47cb69;
  font-size: 18px;
  color: #fff;
  font-family: 'SimSun';
  margin-right: 4%;
  line-height: 45px;
}
.btnCss2:hover{
  background-color: #47cb69;
}
/*续费样式*/
/*.payMore{*/
  /*position: relative;*/
  /*float: right;*/
  /*display: inline-block;*/
  /*border-radius: 3px;*/
  /*width: 16%;*/
  /*height: 45px;*/
  /*border: 1px solid #47cb69;*/
  /*background-color: #47cb69;*/
  /*font-size: 18px;*/
  /*color: #fff;*/
  /*font-family: 'SimSun';*/
  /*line-height: 45px;*/
/*}*/
.payMore{
  position:relative;
  display:inline-block;
  width: 75px;
  height: 45px;
  color: #fff;
  font-family: 'SimSun';
  font-size: 18px;
  background-color: #47cb69;
  /*margin-top: -265px;*/
  padding-left: 0;
  margin-right: 165px;
  border-radius: 0px;
  line-height: 50px;
  border: 1px solid #47cb69;
}
.payMore:hover{
  background-color: #50e476;
}
/*获取更多模板样式*/
.getMoreTemp{
  width: 242px;
  height: 60px;
  margin-top: 42px;
  background-color: #47cb69;
  font-size:30px;
  color: #fff;
  border-radius: 3px;
  font-family: 'SimSun';
  align-items: center;
  line-height: 60px;
}
.getMoreTemp:hover{
  background-color: #50e476;
}
/*启动活动成功弹窗样式*/
.payDailog{
  background: url('/static/imgs/myActivityImg/details_buy.png') no-repeat;
}
  .payTitle{
    position: absolute;
    display: inline-block;
    font-size: 24px;
    color: #fefefe;
    margin-top: -200px;

  }
  .payImg{
    position: absolute;
    display: inline-block;
    flex-direction: row;
    margin-top: -120px;
  }
  .payTreasure{
    width: 212px;
    height: 107px;
    margin-left: -250px;
  }
  .weChat{
    width: 212px;
    height: 107px;
    margin-left: 50px;
    margin-top: -107px;
  }
  .sumCss{
    margin-top: 200px;
  }
  /*单选框样式*/
  .sum{
    font-size: 24px;
    color: #000;
  }
  .getNumber{
    display: inline-block;
    width: 194px;
    height: 50px;
    background-color: rgb(233,233,231);
    border-radius: 3px;
    margin-right: 5px;
    font-size: 18px;
    cursor: pointer;
    align-items: center;
    text-align: center;
  }
  .radio{
    display: flex;
    position: relative;
    justify-content: space-around;
    flex-direction: row;
    font-size: 24px;
    padding-top: 50px;
  }
    .radio1 .radio2 .radio3 {
      display: inline-block;
      width: 82px;
      height: 62px;
    }
    .inputCss{
      margin-left: 20px;
    }
    .radioCss{
      width: 20px;
      height: 0px;
      background-color: #000;
      margin-right: 30px;
      border-radius: 50%;
      position: relative;
    }
    .radioCss:before,.radioCss:after{
      content: '';
      display: block;
      position: absolute;
      border-radius: 50%;
      transition: .3s ease;
    }
    .radioCss:before{
      top: 0px;
      left: 0px;
      width: 18px;
      height: 18px;
      background-color: #fff;
      border: 1px solid #000;
    }
    .radioCss:after{
      top: 6px;
      left: 6px;
      width: 8px;
      height: 8px;
      background-color: #fff;
    }
    .radioCss:checked:after{
      top: 4px;
      left: 4px;
      width: 12px;
      height: 12px;
      background-color:#000;
    }
    .radioCss:checked:before{
      border-color: #000;
    }
  .btnDialogCss{
    position: relative;
    margin-top: 70px;
  }
    .btn1{
      width: 180px;
      height: 40px;
      color: #47cb69;
      font-size: 24px;
      border:1px solid #47cb69;
      border-radius: 3px;
      background-color: transparent;
      float: left;
      margin-left: 10px;
      font-family: 'SimSun';
    }
    .btn1 .btn3:hover{
      color: #fff;
      background-color: #50e476;
    }
    .btn2{
      width: 180px;
      height: 40px;
      color: #fff;
      font-size: 24px;
      border:1px solid #47cb69;
      border-radius: 3px;
      background-color: #47cb69;
      font-family: 'SimSun';
    }
    .btn2:hover{
      background-color: #50e476;
    }
    .btn3{
      width: 180px;
      height: 40px;
      color: #47cb69;
      font-size: 24px;
      border:1px solid #47cb69;
      border-radius: 3px;
      background-color: transparent;
      float: right;
      margin-right: 10px;
      font-family: 'SimSun';
    }
/*用户自定义弹窗样式*/
.userDefinedDialog{
  /*position: absolute;*/
  width: 500px;
  height: 450px;
}
.dialog-content{
  width: 500px;
}
.startSuccessContent{
  display: flex;
  flex-direction:column;
  width: 500px;
  height: 400px;
  background: url('/static/imgs/myTemplateImg/MyTemplate_GetLink.png') no-repeat;
}
.startSuccessTitle{
  display: inline-block;
  color: #fff;
  font-size: 24px;
  align-items: center;
  font-family: 'SimSun';
  padding-top: 10px;
}
.tip1{
  display: inline-block;
  color: #f17272;
  font-family: 'SimSun';
  font-size: 20px;
  padding-top: 21px;
  align-items: center;
}
.tip2{
  display: inline-block;
  color: #f17272;
  font-family: 'SimSun';
  font-size: 20px;
  padding-top: 13px;
  align-items: center;
}
.TwoDbarcode{
  display:inline-block;
  flex-direction: row;
  justify-content: space-between;
  padding-left:77px;
  padding-right: 78px;
}
.TwoDbarcode span{
  display: inline-block;
  width: 100px;
  height: 10px;
  font-family: 'SimSun';
  margin-top: -40px;
  margin-left: 5px;
}
.left2D{
  float: left;
  width: 117px;
}
.right2D{
  float: right;
  width: 117px;
}
.TwoDbarcodeImg{
  width: 117px;
  height: 117px;
  background-color: #d6d6d6;
}
.downBtn{
  display: inline-block;
  width: 98px;
  height: 42px;
  color: #47cb69;
  border-radius: 3px;
  border: 1px solid #47cb69;
  margin-top: 14px;
  font-family: 'SimSun';
  font-size: 24px;
  background-color: transparent;
  margin-top: -5px;
}
.downBtn:hover{
  color: #fff;
  background-color: #50e476;
}
.startSure{
  display: inline-block;
  width: 98px;
  height: 42px;
  color: #fff;
  background-color: #47cb69;
  border-radius: 3px;
  border: 1px solid #47cb69;
  margin-top: 25px;
  margin-left: 200px;
  font-size: 24px;
  align-items: center;
  font-family: 'SimSun';
}
.startSure:hover{
  background-color: #50e476;
}
.setTime{
  display: flex;
  flex-direction:column;
  width: 500px;
  height: 400px;
  background: url('/static/imgs/myActivityImg/details_custom.png') no-repeat;
}
  .setTimeTitle{
    font-family: 'SimSun';
    font-size: 24px;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 50px;
  }
  /*.pickerCss{
    width: 298px;
    height: 44px;
    color: #fff;
    background-color: #9c9c9c;
  }*/
  .tip{
    color: #f17272;
    font-size: 20px;
    margin-top: 36px;
    font-family: 'SimSun';
  }
  .btn{
    margin-top: 42px;
  }
  .start{
    width: 112px;
    height: 44px;
    background-color: #47cb69;
    color: #fff;
    font-family: 'SimSun';
    font-size: 24px;
    border: 1px solid #47cb69;
    border-radius: 3px;
  }
  .start:hover{
    background-color: #50e476;
  }
  .cancel{
    width: 112px;
    height: 44px;
    background-color: transparent;
    color: #47cb69;
    font-family: 'SimSun';
    font-size: 24px;
    border: 1px solid #47cb69;
    border-radius: 3px;
    margin-left: 159px;
  }
  .cancel:hover{
    background-color: #50e476;
    color: #fff;
  }
   /*支付框样式*/
.payDialog{
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 600px;
  height: 500px;
  background: url('/static/imgs/myActivityImg/details_buy.png') no-repeat;
}
  .payTitle{
    position: absolute;
    display: inline-block;
    font-size: 24px;
    color: #fefefe;
    margin-top: -220px;
    margin-left: 220px;
  }
  .payImg{
    position: absolute;
    display: inline-block;
    flex-direction: row;
    margin-top: -120px;
  }
  .payTreasure{
    width: 212px;
    height: 107px;
    margin-left: 80px;
  }
  .weChat{
    width: 212px;
    height: 107px;
    margin-left: 338px;
    margin-top: -107px;
  }
  .sumCss{
    margin-top: 200px;
  }
  /*单选框样式*/
  .sum{
    font-size: 24px;
    color: #000;
  }
  .getNumber{
    display: inline-block;
    width: 194px;
    height: 50px;
    background-color: rgb(233,233,231);
    border-radius: 3px;
    margin-right: 5px;
    font-size: 18px;
    cursor: pointer;
    align-items: center;
    text-align: center;
  }
  .radio{
    display: flex;
    position: relative;
    justify-content: space-around;
    flex-direction: row;
    font-size: 24px;
    padding-top: 50px;
  }
    .radio1 .radio2 .radio3 {
      display: inline-block;
      width: 82px;
      height: 62px;
    }
    .inputCss{
      margin-left: 20px;
    }
    .radioCss{
      width: 20px;
      height: 0px;
      background-color: #000;
      margin-right: 30px;
      border-radius: 50%;
      position: relative;
    }
    .radioCss:before,.radioCss:after{
      content: '';
      display: block;
      position: absolute;
      border-radius: 50%;
      transition: .3s ease;
    }
    .radioCss:before{
      top: 0px;
      left: 0px;
      width: 18px;
      height: 18px;
      background-color: #fff;
      border: 1px solid #000;
    }
    .radioCss:after{
      top: 6px;
      left: 6px;
      width: 8px;
      height: 8px;
      background-color: #fff;
    }
    .radioCss:checked:after{
      top: 4px;
      left: 4px;
      width: 12px;
      height: 12px;
      background-color:#000;
    }
    .radioCss:checked:before{
      border-color: #000;
    }
  .btnDialogCss{
    position: relative;
    margin-top: 70px;
  }
    .btn1{
      width: 180px;
      height: 40px;
      color: #47cb69;
      font-size: 24px;
      border:1px solid #47cb69;
      border-radius: 3px;
      background-color: transparent;
      float: left;
      margin-left: 10px;
      font-family: 'SimSun';
    }
    .btn1 .btn3:hover{
      color: #fff;
      background-color: #50e476;
    }
    .btn2{
      width: 180px;
      height: 40px;
      color: #fff;
      font-size: 24px;
      border:1px solid #47cb69;
      border-radius: 3px;
      background-color: #47cb69;
      font-family: 'SimSun';
    }
    .btn2:hover{
      background-color: #50e476;
    }
    .btn3{
      width: 180px;
      height: 40px;
      color: #47cb69;
      font-size: 24px;
      border:1px solid #47cb69;
      border-radius: 3px;
      background-color: transparent;
      float: right;
      margin-right: 10px;
      font-family: 'SimSun';
    }
</style>
<style>
  /*.startTime{
    color: #9c9c9c;
    font-family: 'SimSun';
    font-size: 20px;
  }*/
  .element label{
    width: 150px;
    color: #9c9c9c;
    font-family: 'SimSun';
    font-size: 20px;
  }
  .dateStyle{
    display: flex;
    flex-direction:column;
    width: 10%;
    height: 45px;
    background-color:#80c8fa;
    color:#fff;
  }
</style>
